<template>
  <div class="login-box">
    <div class="loginForm">
      <h3>商品管理系统</h3>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            :prefix-icon="Avatar"
            v-model="ruleForm.username"
            type="text"
            autocomplete="off"
            placeholder="请输入账号"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            :prefix-icon="Lock"
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
            placeholder="请输入密码"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm()">登陆</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Avatar, Lock } from "@element-plus/icons-vue";
import { ElMessage, FormRules } from "element-plus";
import { reactive, ref } from "vue";
import * as http from "@/request/http";
import { useUserStore } from "@/store/module/user";
import { useRouter } from "vue-router";
const userStore = useUserStore();
const router = useRouter();
const ruleFormRef = ref();
const ruleForm = reactive({
  username: "admin",
  password: "123456",
});

// 验证信息
const rules = reactive<FormRules>({
  // 方法一
  // username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
  // password: [{ required: true, message: "密码不能为空", trigger: "blur" }],

  // 方法二
  username: [{ validator: validatorUsername, trigger: "blur", required: true }],
  password: [{ validator: validatorPassword, trigger: "blur", required: true }],
});
// 这是方法二的属性方法
function validatorUsername(
  rule: unknown,
  value: string | number,
  callback: any
) {
  if (value === "") {
    callback("账号不能为空!!!!");
  } else {
    callback();
  }
}
function validatorPassword(
  rule: unknown,
  value: string | number,
  callback: any
) {
  if (value === "") {
    callback("密码不能为空!!!!");
  } else {
    callback();
  }
}

// 提交按钮
function submitForm() {
  // ruleFormRef.value.validate((valRef: boolean) => {
  //   if (valRef) {
  //     console.log("通过验证");
  //   } else {
  //     console.log("验证失败");
  //   }
  // });

  ruleFormRef.value
    .validate()
    .then(() => {
      console.log("通过验证");
      // 接口
      http.admin
        .adminLogin({
          username: ruleForm.username,
          password: ruleForm.password,
        })
        .then(async (res) => {
          if (res.code == 200) {
            //1 提示
            ElMessage({
              message: "通过验证",
              type: "success",
            });
            //2 存token
            localStorage.setItem("token", res.data.tokenHead + res.data.token);
            // //3 请求当前登录的用户信息（权限）
            // let res2 = await http.admin.adminInfo();
            // userStore.updateMenus(res2.data.menus);

            // 4 跳转到首页 this.router(``)
            router.push(`/index`);
          }
        });
    })
    .catch(() => {
      ElMessage.error("验证失败");
    });
}
</script>

<style lang="less" scoped>
.login-box {
  width: 100vw;
  height: 100vh;
  background: rgb(45, 58, 75);
  .loginForm {
    width: 420px;
    height: 280px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    h3 {
      color: #fff;
      text-align: center;
      font-size: 24px;
      padding: 10px 0;
      height: 50px;
    }
  }
}
// 修改第三方样式
// vue2 /deep/
// vue3 :deep(类名){}

// 输入框
:deep(.el-input__wrapper) {
  width: 100%;
  height: 40px;
  background: rgb(40, 52, 67);
}
// 登录按钮
:deep(.el-button--primary) {
  width: 100%;
}
:deep(.el-input__inner) {
  font-size: 12px;
}
</style>
